<template>
  <div class="screen page-content">
    <screen-header :title="'中央运输系统大数据监测'"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1">
            <div class="ibox-header">
              <span class="ibox-title">7日单量趋势</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="trans_chart1_1"></div>
            </div>
          </div>
          <div class="ibox box1-2">
            <div class="ibox-header">
              <span class="ibox-title">今日运输工单监控</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="trans_chart1_2"></div>
            </div>
          </div>
          <div class="ibox box1-3">
            <div class="ibox-header">
              <span class="ibox-title">本月运输量监控</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="trans_chart1_3"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="box2-1">
            <div class="horizontal-overview3">
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['yearCompleteTotalTaskCount']" from="0"
                    :to="taskData['yearCompleteTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <span style="margin: 0 -5px;">/</span>
                  <animate-number v-if="taskData && taskData['yearTotalTaskCount']" from="0"
                    :to="taskData['yearTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>本年总任务及完成量</p>
              </div>
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['monthCompleteTotalTaskCount']" from="0"
                    :to="taskData['monthCompleteTotalTaskCount']" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <span style="margin: 0 -5px;">/</span>
                  <animate-number v-if="taskData && taskData['monthTotalTaskCount']" from="0"
                    :to="taskData['monthTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>本月总任务及完成量</p>
              </div>
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['todayCompleteTotalTaskCount']" from="0"
                    :to="taskData['todayCompleteTotalTaskCount']" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <span style="margin: 0 -5px;">/</span>
                  <animate-number v-if="taskData && taskData['todayTotalTaskCount']" from="0"
                    :to="taskData['todayTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>今日总任务及完成量</p>
              </div>
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['monthTotalTaskCount']" from="0"
                    :to="taskData['monthTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>本月服务总次数</p>
              </div>
              <div class="fx-box fx-column">
                <div class="fx-1 item-small">
                  <h4 class="num">
                    <animate-number v-if="feedback && feedback.todaySatisfiedRate" from="0"
                      :to="feedback.todaySatisfiedRate" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>100</span>
                    <span style="font-size: 0.8vw;margin-left: -0.5vw;">%</span>
                  </h4>
                  <p>今日客户满意度</p>
                </div>
                <div class="fx-1 item-small">
                  <h4 class="num">
                    <animate-number v-if="feedback && feedback.todayServerCount" from="0"
                      :to="feedback.todayServerCount" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </h4>
                  <p>今日客户服务件次</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box2-2 bgh">
            <div class="ibox-header">
              <span class="ibox-title">最新发布任务</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-table">
                <table>
                  <tr>
                    <th>名称</th>
                    <th>起始地</th>
                    <th>目的地</th>
                    <th>任务类型</th>
                    <th>发布时间</th>
                    <th>状态</th>
                  </tr>
                  <tr v-for="(item, index) in taskList" :key="index">
                    <td>{{ item.title || "--" }}</td>
                    <td>{{ item.sdepartName || "--" }}</td>
                    <td>{{ item.edepartName || "--" }}</td>
                    <td>{{ item.typeName || "--" }}</td>
                    <td>{{ item.addtime | date("M/d H:m") }}</td>
                    <td>
                      <span v-if="item.status == 0">已发布</span>
                      <span v-else-if="item.status == 1">进行中</span>
                      <span v-else-if="item.status == 2">已完成</span>
                      <span v-else-if="item.status == 3">未开始</span>
                      <span v-else-if="item.status == 4">审核通过</span>
                      <span v-else-if="item.status == 5">审核不通过</span>
                      <span v-else-if="item.status == 6">转让中</span>
                      <span v-else-if="item.status == 7">已转让</span>
                      <span v-else-if="item.status == 8">已评价</span>
                      <span v-else-if="item.status == 9">已作废</span>
                      <span v-else>--</span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="ibox box2-3 bgh">
            <div class="ibox-header">
              <span class="ibox-title">今日运输任务时段监控</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="trans_chart2_3"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box3-1">
            <div class="ibox-header">
              <span class="ibox-title">本月科室运输量监控<small style="font-size: 0.72vw;opacity: 0.9;">(TOP10)</small></span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="trans_chart3_1"></div>
            </div>
          </div>
          <div class="ibox box3-2 bgv">
            <div class="ibox-header">
              <span class="ibox-title">综合任务质量排名</span>
            </div>
            <div class="ibox-body fx-box fx-column">
              <div class="fx-1 fx-box fx-column">
                <div class="group-head"><span>本月综合任务质量(TOP10)</span></div>
                <div class="chart fx-1" id="trans_chart3_21"></div>
              </div>
              <div class="fx-1 fx-box fx-column">
                <div class="group-head"><span>本年综合任务质量(TOP10)</span></div>
                <div class="chart fx-1" id="trans_chart3_22"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      pageConfig: {},
      taskData: {},
      feedback: {},
      taskList: [],
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        setTimeout(this.initData, 200);
        this.timer = setInterval(this.initData, 10000);
      } else {
        clearInterval(this.timer);
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getPageConfig() {
      // this.pageConfig = {};
      // this.https("get", "/api/Values/ReadData", { "classKey": "transport_config" }).then((res) => {
      //   const data = res.values;
      //   if (data) {
      //     this.pageConfig = JSON.parse(data);
      //   } else {
      //     this.pageConfig = {};
      //   }
      // });
    },
    getTaskMonitorByDay() {
      this.https("get", "/api/Values/GetTransportTaskDataMonitor_day", { typeClass: 2 }).then((res) => {
        const data = res || [];
        let chartAxis = [], seriesDatas = [{
          name: "物资运输量",
          key: "materialsTransportTaskCount",
          data: [],
        },
        {
          name: "病人送检",
          key: "patientTransportTaskCount",
          data: [],
        }, {
          name: "文书运输",
          key: "docTransportTaskCount",
          data: [],
        },
        {
          name: "标本运输量",
          key: "specimenTransportTaskCount",
          data: [],
        },
        {
          name: "药品运输量",
          key: "drugTransportTaskCount",
          data: [],
        }];
        data.map((item, index) => {
          chartAxis.push(this.func.formatDate(item.date, "MM/dd"))
        })
        let colors = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0", "#3BA272", "#9A60B4", "#EA7CCC", "#91CC75", "#FC8452"];
        seriesDatas.map((item, index) => {
          item.data = data.map(sItem => { return sItem[item.key] });
          let config = {
            type: "line",
            symbol: "none",
            labe: {
              show: false,
            },
            color: colors[index],
            lineStyle: {
              width: this.func.chartSize(1.5),
              color: colors[index],
            },
          }
          item = Object.assign(item, config);
        })
        charts.lineChart("trans_chart1_1", chartAxis, seriesDatas);
      });
    },
    getTaskCount() {
      this.taskData = {};
      this.https("get", "/api/Values/GetTaskCount", { typeClass: 2 }).then((res) => {
        this.taskData = res || {};
      });
    },
    getFeedback() {
      this.feedback = {};
      this.https("get", "/api/Values/GetFeedback", { typeClass: 2 }).then((res) => {
        this.feedback = res || {};
      });
    },
    getTaskList() {
      this.taskList = [];
      this.https("get", "/api/Values/GetTasks", { typeClass: 2 }).then((res) => {
        this.taskList = res || [];
      });
    },
    getTodayTransport() {
      this.https("get", "/api/Values/GetTransportTaskDataMonitor_CurDay", { typeClass: 2 }).then((res) => {
        const data = res || {};
        let chartAxis = ["已发布", "进行中", "已完成", "未开始", "审核通过", "审核不通过", "转让中", "已转让", "已评价", "已作废"];
        let seriesDatas = [{
          type: "bar",
          barWidth: this.func.chartSize(12),
          data: [data.state0_Count, data.state1_Count, data.state2_Count, data.state3_Count,
          data.state4_Count, data.state5_Count, data.state6_Count, data.state7_Count, data.state8_Count, data.state9_Count],
          itemStyle: {
            borderRadius: [0, 100, 100, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#4E6AE9',
              },
              {
                offset: 1,
                color: '#02DDFE',
              }
            ]),
          },
          label: {
            show: true,
            position: "insideRight",
            offset: [-5, 0],
            color: "#fff",
            formatter: (params) => {
              return `${params.value || ''}`
            },
          },
        }];
        charts.hBlockChart("trans_chart1_2", chartAxis, seriesDatas);
      });
    },
    getMonthTransport() {
      this.https("get", "/api/Values/GetTransportTaskDataMonitor_month", { typeClass: 2 }).then((res) => {
        const data = res || {};
        let series = [{
          z: 10,
          name: '',
          type: 'pie',
          radius: ['35%', '80%'],
          center: ['60%', '50%'],
          roseType: 'area',
          label: {
            position: "outside",
            color: "#5BBFFE",
            fontWeight: 600,
            formatter: (params) => {
              return `{val|${params.value}}`
            },
            rich: {
              val: {
                fontSize: this.func.chartSize(12),
                lineHeight: 14,
                color: '#DDF2FF'
              }
            }
          },
          labelLine: {
            // show: false,
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          tooltip: {
            show: false,
          },
          data: [
            { value: data.patientTransportTaskCount, name: '病员送检', itemStyle: { color: "#FA5D58" } },
            { value: data.docTransportTaskCount, name: '文书送检', itemStyle: { color: "#FDD214" } },
            { value: data.specimenTransportTaskCount, name: '标本送检', itemStyle: { color: "#9B73F0" } },
            { value: data.drugTransportTaskCount, name: '药品送检', itemStyle: { color: "#149BED" } },
            { value: data.materialsTransportTaskCount, name: '物资运输', itemStyle: { color: "#48D0E0" } },
          ]
        }, {
          name: '',
          type: 'pie',
          radius: ['78%', '80%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        },
          , {
          name: '',
          type: 'pie',
          radius: ['34%', '35%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        }]
        series[0].data.map(item => {
          let color = {
            colorStops: [{
              offset: 0,
              color: item.itemStyle.color,
            },
            {
              offset: 1,
              color: this.func.hexToRgba(item.itemStyle.color, 0.8),
            },]
          }
          item.itemStyle.color = color;
        })
        charts.pieChart("trans_chart1_3", series);
      });
    },
    getHoursMonitor() {
      this.https("get", "/api/Values/GetTransportTaskDataMonitor_hours", { topHours: 24, typeClass: 2 }).then((res) => {
        const data = res || [];
        let colors = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0", "#3BA272", "#9A60B4", "#EA7CCC", "#91CC75", "#FC8452"];
        let chartAxis = [], seriesDatas = [{
          name: "物资运输量",
          key: "materialsTransportTaskCount",
          data: [],
        },
        {
          name: "病人送检",
          key: "patientTransportTaskCount",
          data: [],
        }, {
          name: "文书运输",
          key: "docTransportTaskCount",
          data: [],
        },
        {
          name: "标本运输量",
          key: "specimenTransportTaskCount",
          data: [],
        },
        {
          name: "药品运输量",
          key: "drugTransportTaskCount",
          data: [],
        }];
        data.map((item, index) => {
          chartAxis.push(this.func.formatDate(item.date, "HH"))
        })
        seriesDatas.map((item, index) => {
          item.data = data.map(sItem => { return sItem[item.key] });
          let config = {
            type: "line",
            symbol: "none",
            labe: {
              show: false,
            },
            color: colors[index],
            lineStyle: {
              width: this.func.chartSize(1.5),
              color: colors[index],
            },
            areaStyle: {
              opacity: 0.2,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: colors[index],
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255,0)',
                }
              ])
            },
          }
          item = Object.assign(item, config);
        })
        charts.lineChart("trans_chart2_3", chartAxis, seriesDatas);
      });
    },
    getDepTransportTaskData() {
      this.https("get", "/api/Values/GetDepTransportTaskData", { typeClass: 2 }).then((res) => {
        const data = res || [];
        data.map(item => {
          item.name = item.deptName;
          item.value = item.taskCount;
        })
        charts.hdBlockChart("trans_chart3_1", data);
      });
    },
    getStaffTransportTaskData() {
      this.https("get", "/api/Values/GetStaffTransportTaskData", { yearOrMonth: 2, take: 10, typeClass: 2 }).then((res) => {
        const data = res || [];
        let chartAxis = [], seriesDatas = [{
          type: "bar",
          barWidth: this.func.chartSize(12),
          data: [],
          itemStyle: {
            borderRadius: 100,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#02DDFE',
              },
              {
                offset: 1,
                color: '#4E6AE9',
              }
            ]),
          }
        }];
        data.map((item, index) => {
          chartAxis.push(item.name || index + 1);
          seriesDatas[0].data.push(item.completeTransportTaskCount);
        })
        charts.blockChart("trans_chart3_21", chartAxis, seriesDatas);
      });
      this.https("get", "/api/Values/GetStaffTransportTaskData", { yearOrMonth: 1, take: 10, typeClass: 2 }).then((res) => {
        const data = res || [];
        let colors = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0", "#3BA272", "#9A60B4", "#EA7CCC", "#91CC75", "#FC8452"];
        let chartAxis = [], seriesDatas = [{
          type: 'pictorialBar',
          barWidth: this.func.chartSize(12),
          data: [],
          symbol: 'triangle',
          itemStyle: {
            borderRadius: 10,
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: this.func.hexToRgba(colors[params.dataIndex > 3 ? 3 : params.dataIndex], 0.4)
              },
              {
                offset: 1,
                color: this.func.hexToRgba(colors[params.dataIndex > 3 ? 3 : params.dataIndex], 1)
              }
              ], false)
            },
          }
        }];
        data.map((item, index) => {
          chartAxis.push(item.name || index + 1);
          seriesDatas[0].data.push(item.completeTransportTaskCount);
        })
        charts.blockChart("trans_chart3_22", chartAxis, seriesDatas);
      });
    },
    initData() {
      this.getPageConfig();
      this.getTaskMonitorByDay();
      this.getTaskCount();
      this.getFeedback();
      this.getTaskList();
      this.getTodayTransport();
      this.getMonthTransport();
      this.getHoursMonitor();
      this.getDepTransportTaskData();
      this.getStaffTransportTaskData();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .statistics-table table th,
  .statistics-table table td {
    font-size: 1.3vh;
  }

  .box1-1 {
    height: 28.5vh;
  }

  .box1-2 {
    height: 28.5vh;
  }

  .box1-3 {
    height: 28.5vh;
  }

  .box2-1 {
    height: 10vh;
    margin-bottom: 2vh;
  }

  .box2-2 {
    height: 42.5vh;
  }

  .box2-3 {
    height: 33vh;
  }

  .box3-1 {
    height: 30vh;
  }

  .box3-2 {
    height: 57.5vh;
  }

  .group-head {
    position: relative;

    &>span {
      display: inline-block;
      border-radius: 2px;
      font-size: 0.68vw;
      font-weight: bold;
      display: inline-block;
      padding: 0.4vh 0.8vw;
      background-color: #0353A9;
    }
  }
}
</style>